<template>
	<view class="discover-container">
		<!-- 背景装饰图片 -->
		<image :src="pageImages.discover_background" class="background-decoration" mode="aspectFill"></image>
		<view class="background-overlay"></view>

		<!-- 顶部轮播图区域 -->
		<view class="banner-section">
			<swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3129" :duration="1000">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image :src="item.image" class="banner-image" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 品牌介绍区域 -->
		<view class="brand-section">
			<image :src="pageImages.discover_brand_bg" class="section-bg-image" mode="aspectFill"></image>
			<view class="section-title">
				<text class="title-text">品牌故事</text>
				<view class="title-line"></view>
			</view>
			<view class="brand-content">
				<view class="brand-paragraph" v-for="(p, i) in brandParagraphs" :key="i">
					<text class="brand-text">{{ p }}</text>
				</view>
			</view>
		</view>

		<!-- 特色服务区域 -->
		<view class="service-section">
			<image :src="pageImages.discover_service_bg" class="section-bg-image" mode="aspectFill"></image>
			<view class="section-title">
				<text class="title-text">特色服务</text>
				<view class="title-line"></view>
			</view>
			<view class="service-grid">
				<view class="service-item" v-for="(item, index) in serviceList" :key="index">
					<image :src="item.icon" class="service-icon"></image>
					<text class="service-name">{{ item.name }}</text>
					<text class="service-desc">{{ item.description }}</text>
				</view>
			</view>
		</view>

		<!-- 联系我们区域 -->
		<view class="contact-section">
			<view class="section-title">
				<text class="title-text">联系我们</text>
				<view class="title-line"></view>
			</view>
			<view class="contact-content">
				<view class="contact-item">
					<text class="contact-label">营业时间：</text>
					<text class="contact-value">{{ businessHours }}</text>
				</view>
				<view class="contact-item">
					<text class="contact-label">联系电话：</text>
					<text class="contact-value">{{ contactPhone }}</text>
				</view>
				<view class="contact-item">
					<text class="contact-label">门店地址：</text>
					<text class="contact-value">{{ storeAddress }}</text>
				</view>
			</view>
		</view>

		<!-- 悬浮的我的按钮 -->
		<view class="floating-profile" @tap="goProfile">
			<text class="profile-icon">👤</text>
		</view>
	</view>
</template>

<script>
import { getPageImages, getImageUrl } from '@/utils/imageConfig.js'

export default {
	data() {
		return {
			// 页面图片配置
			pageImages: {
				discover_background: '/static/background.jpg',
				discover_brand_bg: '/static/icons/21d3be7614c2c24dda59c2a40eb33649.jpg',
				discover_service_bg: '/static/icons/1.jpg',
				discover_banner_1: '/static/logo.jpg'
			},
			// 轮播图数据
			bannerList: [
				{
					image: '/static/logo.jpg'
				}
			],
			// 品牌故事（分段展示）
			brandParagraphs: [
				'“Theia（曦雅）”，以古希腊神话中司掌光与视觉的女神之名，为每一位独立清醒的女性，淬炼专属于自我的那束光芒。',
				'我们深信，真正的璀璨从非谁的附庸——正如女性的灵魂本就独立：以独立思考为人生锚点，笃定方向；以独立审美为风格标尺，定义模样；以独立姿态为生活掌舵，掌控节奏。',
				'从万里挑一的钻石，到经百年工艺打磨的无畏勋章，Theia甄选自然的馈赠，只为呈现不迎合的本真。它的闪耀从非为取悦谁而存在，却始终与你对美好的执着同频共振。切割时坚守棱角的独特，镶嵌时拒绝流俗的设计，每道工序都烙印着“不盲从、做自己”的信念，恰如你在生活中打破定义的勇气。',
				'Theia的钻石，是独立女性的灵魂镜像：它看见你为热爱奋不顾身的炽热，陪伴你与自我独处时的深度对话，更在每个重要时刻轻声提醒——真正的高贵，是既能欣赏世间万千美好，更始终坚信：自己，本就是美好本身。',
				'这束光，终将成为你独立人生里，最懂你的同行者。'
			],
			// 特色服务列表
			serviceList: [
				{
					icon: '/static/icons/0.jpg',
					name: '专业定制',
					description: '个性化珠宝定制服务',
					iconKey: 'service_icon_custom'
				},
				{
					icon: '/static/icons/08ff0bd53a8643cd360e68f761bc2c25.jpg',
					name: '品质保证',
					description: '严格品质把控体系',
					iconKey: 'service_icon_quality'
				},
				{
					icon: '/static/icons/09.webp',
					name: '售后服务',
					description: '完善的售后保障',
					iconKey: 'service_icon_support'
				},
				{
					icon: '/static/icons/3.jpg',
					name: '线下体验',
					description: '实体店面试戴体验',
					iconKey: 'service_icon_experience'
				}
			],
			// 联系信息（待填充具体内容）
			businessHours: '周一至周日 9:00-21:00',
			contactPhone: '17778060636',
			storeAddress: '北京通州'
		}
	},
	async onLoad() {
		// 页面加载时的初始化操作
		await this.initPageData();
		await this.loadPageImages();
		
		// 显示分享菜单
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	},
	methods: {
		goProfile() {
			uni.navigateTo({ url: '/pages/profile/profile' })
		},
		// 初始化页面数据
		initPageData() {
			// 这里可以调用API获取最新的品牌信息和公司介绍
			console.log('发现页面初始化完成');
		},

		// 加载页面图片配置
		async loadPageImages() {
			try {
				// 获取发现页面的所有图片配置
				const images = await getPageImages('discover');

				// 更新页面图片
				if (images.discover_background) {
					this.pageImages.discover_background = images.discover_background.url;
				}
				if (images.discover_brand_bg) {
					this.pageImages.discover_brand_bg = images.discover_brand_bg.url;
				}
				if (images.discover_service_bg) {
					this.pageImages.discover_service_bg = images.discover_service_bg.url;
				}
				if (images.discover_banner_1) {
					this.pageImages.discover_banner_1 = images.discover_banner_1.url;
					// 更新轮播图
					this.bannerList[0].image = images.discover_banner_1.url;
				}

				// 更新服务图标
				for (let i = 0; i < this.serviceList.length; i++) {
					const service = this.serviceList[i];
					if (service.iconKey && images[service.iconKey]) {
						this.serviceList[i].icon = images[service.iconKey].url;
					}
				}

				console.log('发现页面图片配置加载完成');
			} catch (error) {
				console.warn('加载页面图片配置失败，使用默认图片:', error);
			}
		},
		
		// 更新品牌故事内容
		updateBrandStory(content) {
			// 支持字符串或数组
			if (Array.isArray(content)) {
				this.brandParagraphs = content;
			} else if (typeof content === 'string') {
				// 简单按换行分段
				this.brandParagraphs = content.split(/\n+/).filter(Boolean);
			}
		},
		
		// 更新公司介绍内容
		updateCompanyIntro(content) {
			this.companyIntro = content;
		},
		
		// 更新联系信息
		updateContactInfo(info) {
			this.businessHours = info.businessHours || this.businessHours;
			this.contactPhone = info.contactPhone || this.contactPhone;
			this.storeAddress = info.storeAddress || this.storeAddress;
		}
	},

	// 分享功能
	onShareAppMessage() {
		return {
			title: '精美珠宝，品质之选 - 发现页',
			path: '/pages/discover/discover',
			imageUrl: this.pageImages.discover_background || ''
		}
	},

	onShareTimeline() {
		return {
			title: '精美珠宝，品质之选',
			query: '',
			imageUrl: this.pageImages.discover_background || ''
		}
	}
}
</script>

<style scoped>
.discover-container {
	background: linear-gradient(135deg, #f5f1e8 0%, #ede4d3 50%, #e8dcc6 100%);
	min-height: 100vh;
	position: relative;
}

/* 背景装饰 */
.background-decoration {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1;
	opacity: 0.08;
}

.background-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: linear-gradient(135deg,
		rgba(212, 175, 55, 0.03) 0%,
		rgba(255, 255, 255, 0.2) 50%,
		rgba(212, 175, 55, 0.03) 100%);
	z-index: 2;
}

/* 轮播图样式 */
.banner-section {
	width: 100%;
	height: 400rpx;
	position: relative;
	z-index: 3;
	border-radius: 0 0 30rpx 30rpx;
	overflow: hidden;
}

.banner-swiper {
	width: 100%;
	height: 100%;
}

.banner-image {
	width: 100%;
	height: 100%;
}

/* 通用区块样式 */
.brand-section,
.company-section,
.service-section,
.contact-section {
	background: linear-gradient(135deg,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 255, 255, 0.9) 100%);
	backdrop-filter: blur(10px);
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(212, 175, 55, 0.15);
	border: 1rpx solid rgba(212, 175, 55, 0.1);
	position: relative;
	z-index: 3;
	overflow: hidden;
}

/* 区块背景图片 */
.section-bg-image {
	position: absolute;
	top: 0;
	right: 0;
	width: 200rpx;
	height: 200rpx;
	opacity: 0.06;
	z-index: -1;
}

/* 标题样式 */
.section-title {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.title-text {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	margin-right: 20rpx;
}

.title-line {
	flex: 1;
	height: 2rpx;
	background: linear-gradient(to right, #D4AF37, transparent);
}

/* 品牌和公司介绍文本样式 */
.brand-content {
	position: relative;
	padding-left: 24rpx;
}
.brand-content::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8rpx;
	bottom: 8rpx;
	width: 4rpx;
	background: linear-gradient(#D4AF37, rgba(212,175,55,0.2));
	border-radius: 2rpx;
}
.brand-paragraph {
	margin-bottom: 20rpx;
}
.brand-text,
.company-text {
	font-size: 30rpx;
	line-height: 1.9;
	color: #555555;
	text-align: justify;
	text-indent: 2em;
}

/* 服务网格样式 */
.service-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30rpx;
}

.service-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30rpx 20rpx;
	background-color: #FAFAFA;
	border-radius: 12rpx;
}

.service-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 20rpx;
	border-radius: 50%;
	border: 2rpx solid rgba(212, 175, 55, 0.3);
}

.service-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 10rpx;
}

.service-desc {
	font-size: 24rpx;
	color: #999999;
	text-align: center;
}

/* 联系信息样式 */
.contact-content {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.contact-item {
	display: flex;
	align-items: center;
}

.contact-label {
	font-size: 28rpx;
	color: #333333;
	font-weight: bold;
	min-width: 160rpx;
}

.contact-value {
	font-size: 28rpx;
	color: #666666;
	flex: 1;
}

/* 悬浮我的按钮样式 */
.floating-profile {
	position: fixed;
	right: 30rpx;
	bottom: 120rpx;
	width: 100rpx;
	height: 100rpx;
	background-color: #D4AF37;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 20rpx rgba(212, 175, 55, 0.4);
	z-index: 999;
	transition: all 0.3s ease;
}

.floating-profile:active {
	background-color: #C19B26;
	transform: scale(0.95);
}

.profile-icon {
	font-size: 40rpx;
	color: #FFFFFF;
}
</style>
